<template>
	<view class="template-product tn-safe-area-inset-bottom" style="height: 100vh;">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :bottomShadow="false">订单详情</tn-nav-bar>
		<view class=" " :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		</view>
		<view class="order--wrap tn-margin-top" >
			<view class="tn-bg-white tn-padding-sm tn-radius" style="margin: 20rpx;">
		   <view class=" tn-margin-top-sm tn-text-bold">收货信息</view>
			<view class="tn-margin-sm">

				<view class="  ">
					<view class="tn-padding-sm tn-text-lg">  <tn-button :plain="true" height="22px"
							shape="round" size="sm" @click="fuzhi(body.name+' '+body.mobile)">复制</tn-button><text class="tn-margin-left-sm"></text> {{body.name}}-{{body.mobile}}
					</view>
					<view class="tn-padding-sm"><tn-button :plain="true" height="22px"
							shape="round" size="sm" @click="fuzhi(body.address)">复制</tn-button><text class="tn-margin-left-sm"></text>{{body.address}}
					</view>

				</view>
			</view>
</view>
			<view v-for="(item,index) in body.cart_list" :key="index" class="order__item" v-if="body.pay_status==0">
				

				<view v-for="(goods,indexsdf) in item.list" :key="indexsdf"
					class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
					
					<view class="order__item__content__image">
						<image :src="goods.images" mode="scaleToFill"></image>
					</view>
					<view class="order__item__content__title tn-text-left " style="width: 100%;">
						<view class="tn-text-bold tn-text-ellipsis-2" style="min-height:85rpx ;">{{goods.title}}
						</view>
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">

							<view class="tn-color-red  ">
								￥<text class="tn-text-xl">{{goods.price}}</text>
							</view>
							<view class="" style="margin-top:10rpx ;margin-left: 10rpx;">
								x{{goods.num}}
							</view>
						</view>
					</view>
				</view>
					<view v-if="item.remarks" class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 10rpx 10rpx;">
						备注：{{item.remarks}}
					</view>

			</view>
			
			<view  v-if="body.pay_status==1" class="order__item" >
				<view class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
			
					<view class="order__item__head__title">
						<text class="tn-icon-shop"></text>
						<text class=""
							@click="navigateToFn({ url: '/shopPages/biz_show?id='+body.partner_id, checkLogin: false })">
							{{body.partner_title}}<text class="tn-icon-right"></text></text>
			
					</view>
			
				</view>
			
				<view v-for="(goods,indexsdf) in body.cart_list" :key="indexsdf"
					class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
					
					<view class="order__item__content__image">
						<image :src="goods.images" mode="scaleToFill"></image>
					</view>
					<view class="order__item__content__title tn-text-left " style="width: 100%;">
						<view class="tn-text-bold tn-text-ellipsis-2" style="min-height:85rpx ;">{{goods.title}}
						</view>
						<view class="tn-flex tn-flex-row-between tn-flex-col-center">
			
							<view class="tn-color-red  ">
								￥<text class="tn-text-xl">{{goods.price}}</text>
							</view>
							<view class="" style="margin-top:10rpx ;margin-left: 10rpx;">
								x{{goods.num}}
							</view>
						</view>
					</view>
				</view>
			<view v-if="body.remarks" class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 10rpx 10rpx;">
				备注：{{body.remarks}}
			</view>
			
			</view>
			
			
					<view class="tn-padding-sm">
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"  >
			  <view class="tn-flex tn-flex-col-center">			  
			    <view class="tn-margin-left-sm tn-flex-1 tn-color-gray">订单编号</view>
			    <view class="tn-margin-left-sm ">{{body.id}}</view>
			  </view>
			</tn-list-cell> 
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"  >
			  <view class="tn-flex tn-flex-col-center">			  
			    <view class="tn-margin-left-sm tn-flex-1 tn-color-gray">订单金额</view>
			    <view class="tn-margin-left-sm ">￥{{body.total_price}}</view>
			  </view>
			</tn-list-cell> 
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"  >
			  <view class="tn-flex tn-flex-col-center">			  
			    <view class="tn-margin-left-sm tn-flex-1 tn-color-gray">店铺收入</view>
			    <view class="tn-margin-left-sm tn-color-red">￥{{body.partner_money}}</view>
			  </view>
			</tn-list-cell> 
			
			
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"  >
			  <view class="tn-flex tn-flex-col-center">			  
			    <view class="tn-margin-left-sm tn-flex-1 tn-color-gray">支付方式</view>
			    <view class="tn-margin-left-sm ">在线支付</view>
			  </view>
			</tn-list-cell> 
			
			
			
			
			
			
			<tn-list-cell v-if="body.pay_time" :hover="true" :unlined="true" :radius="true" :fontSize="30"  >
			  <view class="tn-flex tn-flex-col-center">			  
			    <view class="tn-margin-left-sm tn-flex-1 tn-color-gray">支付时间</view>
			    <view class="tn-margin-left-sm ">{{body.pay_time}}</view>
			  </view>
			</tn-list-cell> 
			<tn-list-cell v-if="body.kuaidi_time" :hover="true" :unlined="true" :radius="true" :fontSize="30"  >
			  <view class="tn-flex tn-flex-col-center">			  
			    <view class="tn-margin-left-sm tn-flex-1 tn-color-gray">发货时间</view>
			    <view class="tn-margin-left-sm ">{{body.kuaidi_time}}</view>
			  </view>
			</tn-list-cell> 			
			<tn-list-cell v-if="body.kuaidi_name"  :hover="true" :unlined="true" :radius="true" :fontSize="30"  >
			  <view class="tn-flex tn-flex-col-center">			  
			    <view class="tn-margin-left-sm tn-flex-1 tn-color-gray">快递公司</view>
			    <view class="tn-margin-left-sm  tn-text-right" style="width: 70%;">{{body.kuaidi_name}}</view>
			  </view>
			</tn-list-cell> 
			<tn-list-cell v-if="body.kuaidi_no" :hover="true" :unlined="true" :radius="true" :fontSize="30" >
			  <view class="tn-flex tn-flex-col-center">			  
			    <view class="tn-margin-left-sm tn-flex-1 tn-color-gray">配送单号</view>
			    <view class="tn-margin-left-sm  tn-text-right" style="width: 70%;">{{body.kuaidi_no}}<tn-button :plain="true" height="22px" shape="round" size="sm" @click="fuzhi(body.kuaidi_no)">复制</tn-button></view>
			  </view>
			</tn-list-cell> 
		
			
	</view>
			
			<view class="tn-padding-bottom"></view>

		</view>


		<view  v-if="body.pay_status==1" class="footerfixed dd-glass tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-padding-bottom-sm">
			<view class="tn-goods-nav-class tn-goods-nav tn-flex tn-flex-row-center tn-safe-area-inset-bottom" style="z-index: 20089;">
				
		<view class="buttons"  v-if="body.tuikuan==1">
					<tn-button :plain="true" height="22px" shape="round" size="sm" @click="tongjitui(2)">同意退款</tn-button>
		</view>
		<view class="buttons"  v-if="body.tuikuan==1">
					<tn-button :plain="true" height="22px" shape="round" size="sm" @click="tongjitui(3)">不同意退款</tn-button>
		</view>
		<view class="buttons"  v-if="body.state==3">
					已发货
		</view>
		<view class="buttons"  v-if="body.state==4">
					已完成
		</view>
		<view class="buttons"  v-if="body.state==6">
					已退款
		</view>
	<view class="buttons"  v-if="body.state==2" @click="fahuoshow=true">
					<view class="buttons__item  buttons__item--round"
						style="background-color:#00aa00; color: rgb(255, 255, 255);width: 250rpx;margin-left: 10px;">
						<view data-v-4d4efb9c="" class="buttons__item__text">发货</view>
					</view>
				</view>
			
			</view>
		</view>


		<view class='tn-tabbar-height'></view>

		<tn-popup v-model="fahuoshow" width="80%"  mode="center" :borderRadius="30" giftitle="修改密码"
			:closeBtn="true" :maskCloseable="false">

			<view class="tn-text-xl tn-margin">填写物流信息</view>
			<view class=" tn-padding">
			
				<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
					<input placeholder="快递公司名称" maxlength="100" v-model="kuaidi_name"
						placeholder-style="color:#AAAAAA"></input>
				</view>			
				<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
					<input placeholder="填写快递单号" maxlength="100" v-model="kuaidi_no"
						placeholder-style="color:#AAAAAA"></input>
				</view>
				<view class="tn-text-center">
					<tn-button :fontSize="28" padding="20rpx" height="56rpx" backgroundColor="#00aa00"
						fontColor="tn-color-white" @click="savepassword()">确认发货</tn-button>
				</view>
			</view>


		</tn-popup>

	</view>
</template>

<script>
	export default {

		data() {
			return {				
				kuaidi_name: '',
				kuaidi_no: '',
				fahuoshow: false,
				heji_money:0,
				user_id: 0,
				xuan_num: 0,
				taocanname: '',
				taocan: 0,
				custom: false,
				show_shenqing: false,
				zhifu: 'xianxiapay',
				labelPosition: 'left',
				labelAlign: 'right',
				border: false,
				actionSheetShow: false,
				labelWidth: 140,
				checkboxWidth: 'auto',
				checkboxWrap: false,
				radioWidth: 'auto',
				radioWrap: false,
				pickerShow: false,
				selectShow: false,
				dizhi: [],
				address_id: 0,
				detail: [],
				body: [],
				loginBoxFlag: false, // 登录框显示隐藏状态
				id: 0,
				beizhu: '',
				tanchushow: false,
				img: '',
				cardCur: 0,
				current: 0,
				countOptions: [],
				customButtonGroups: [],
				partner: [],
				body:[]
			}
		},
		onLoad(option) {
			this.id = option.id
			let that = this;
			this.info()
		},
		methods: {
		
	
			async info() {

				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/shop/order_show',
					data: {id:this.id}
				});
				if (result.data.code == 200) {
					if (result.data.data.id) {
						this.body = result.data.data
								
					}

				}

			},
		fuzhi(neirong) {
		
			uni.setClipboardData({
				data: neirong,
				complete() {
					uni.showToast({
						title: "已复制到剪贴板"
					})
				}
			})
		
		},
		async savepassword() {
			let that = this;
		
			if (!this.kuaidi_name) {
				this.msg('请填写快递公司')
				return
			}
			if (!this.kuaidi_no) {
				this.msg('请填写快递单号')
				return
			}
			let result = await that.$request({
				loading: 0,
				method: 'post',
				url: '/chat/partner/fahuopass',
				data: {
					id: this.id,
					kuaidi_name: this.kuaidi_name,
					kuaidi_no: this.kuaidi_no
				}
			});
			if (result.data.code == 200) {
				this.fahuoshow = false
					that.info()	
					uni.$emit('fahuo', true)
				uni.showModal({
					title: '提示',
					content: '发货成功',
					confirmText: '确定',
					showCancel:false,
					success: function(res) {
						if (res.confirm) {
						that.info()						
						} else if (res.cancel) {}
					}
				});
		
			
			}
		
		},
		
		async tongjitui(type) {
			let that = this;
		
			let result = await that.$request({
				loading: 0,
				method: 'post',
				url: '/chat/partner/tuikuan',
				data: {
					id: this.id,
					type:type
				}
			});
			if (result.data.code == 200) {
				uni.showModal({
					title: '提示',
					content: '操作成功',
					confirmText: '确定',
					showCancel:false,
					success: function(res) {
						if (res.confirm) {
						that.info()						
						} else if (res.cancel) {}
					}
				});
				
			}
		
		},
		



		}
	}
</script>

<style lang="scss" scoped>
	.template-product {
	  background-color: #f4f4f4;
		  
	}

	.custom-modal-content {
		width: 100%;
		height: 100%;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.icon {
			font-size: 100rpx;
			margin-bottom: 20rpx;
			color: $tn-main-color;
		}

		.text {
			font-size: 40rpx;
		}
	}

	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}

	/* 用户头像 start */
	.logo-image {
		width: 110rpx;
		height: 110rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	
	.options {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100%;
		color: #AAAAAA;
	
		&__item {
			padding: 0 26rpx;
	
			&--avatar {
				padding: 0rpx 0rpx 0rpx 26rpx !important;
			}
	
			&__icon {
				position: relative;
				font-size: 36rpx;
				margin-bottom: 6rpx;
			}
	
			&__text {
				font-size: 22rpx;
			}
		}
	}
	
	.order {
		&--wrap {
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
		}
	
		/* 导航栏 start */
		&__tabs {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background-color: inherit;
		}
	
		/* 导航栏 end */
	
		/* swiper start */
		&__swiper {
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
			padding: 0 16rpx;
		}
	
		/* swiper end */
	
		/* 订单内容 start */
		&__item {
			margin: 20rpx;
			padding: 36rpx 26rpx;
			background-color: #FFFFFF;
			border-radius: 18rpx;
	
			&:first-child {
				margin-top:0rpx;
			}
	
			&:last-child {
				margin-bottom: 0;
			}
	
			/* 头部 start */
			&__head {
	
				&__title {
					font-weight: bold;
					line-height: normal;
	
					&--right-icon {
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}
	
				&__status {
					font-size: 22rpx;
					color: #AAAAAA;
				}
			}
	
			/* 头部 end */
	
			/* 内容 start */
			&__content {
	
				margin-top: 20rpx;
	
				&__image {
					margin-right: 20rpx;
	
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}
				}
	
				&__title {
					padding-right: 10rpx;
	
				}
	
				&__info {
	
					&__price {
						&--unit {
							font-size: 20rpx;
						}
	
						&__value--integer,
						&__value--decimal {
							font-weight: bold;
						}
	
						&__value--decimal {
							font-size: 20rpx;
						}
					}
	
					&__count {
						color: #AAAAAA;
						font-size: 24rpx;
					}
				}
			}
	
			/* 内容 end */
	
			/* 操作按钮 start */
			&__operation {
				margin-top: 30rpx;
	
				&__right {
					&__button {
						margin-left: 10rpx;
					}
				}
			}
	
			/* 操作按钮 end */
		}
	
		/* 订单内容 end */
	}
	
	/* 底部 start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}
	
	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}
	
	.tn-goods-nav {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 88rpx;
		width: 100%;
		box-sizing: content-box;
	
		&--shadow {
			box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
	
			&::before {
				content: " ";
				position: absolute;
				width: 100%;
				height: 100%;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				background-color: transparent;
				z-index: -1;
			}
		}
	
		&--fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}
	
		.options {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 100%;
			color: #AAAAAA;
	
			&__item {
				padding: 0 26rpx;
	
				&--avatar {
					padding: 0rpx 0rpx 0rpx 26rpx !important;
				}
	
				&__icon {
					position: relative;
					font-size: 36rpx;
					margin-bottom: 6rpx;
				}
	
				&__text {
					font-size: 22rpx;
				}
			}
		}
	
		.buttons {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 100%;
	
			&__item {
			
				padding: 0 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
	
				&--rect {
					height: 100%;
				}
	
				&--padding-rect {
					height: 80%;
				}
	
				&--round {
					height: 75%;
	
					&:first-child {
						border-top-left-radius: 100rpx;
						border-bottom-left-radius: 100rpx;
					}
	
					&:last-child {
						border-top-right-radius: 100rpx;
						border-bottom-right-radius: 100rpx;
					}
				}
	
				&__text {
					display: inline-block;
					font-weight: bold;
					font-size: 30rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}
	
</style>